<template>
  <input
    type="text"
    v-model="inputValue"
    class="w-[323px] h-[53px] pl-[30px] rounded-[12px] myinput"
    @keyup.enter="addItem"
  />
</template>

<script setup>
import mitts from "../bus";
const inputValue = ref("");
let listValues;
onMounted(() => {
  // 触发自定义事件，并传值
  mitts.emit("giveInputValue", inputValue);
  //   console.log(listValues, "listValues");
});
// 需要接收值的组件里，定义自定义事件，在回调中接收值
/*
    mitts.on('giveInputValue',(e)=>{
      console.log(e) // e即为这个值。
    })
*/
mitts.on("givelistValues", (arr) => {
  listValues = arr;
});
mitts.on("clearinputValue", () => {
  inputValue.value = "";
});
const addItem = () => {
  const has = listValues.value.some((item) => item.value === inputValue.value);
  if (has) {
    alert("值重复");
  } else if (inputValue.value === "") {
    alert("值为空");
  } else {
    mitts.emit("addlistValues");
  }
};
</script>

<style lang="scss" scoped>
.myinput {
  border: 2px solid #000;
  margin-bottom: 30px;
}
</style>
